<template>
    <view>
        <!-- 收货地址 -->
        <view class="address" @click="getUserAddress">
            <!-- 默认地址 -->
        <view class="address-info" v-if="address.userName">
            <view class="address-detail">{{ detailAddress }}</view>
            <view class="address-user">
                {{ address.userName }} {{ address.telNumber }}
            </view>
        </view>

        <!-- 添加地址 -->
        <view class="address-btn"  v-else>
            添加地址
        </view>

        </view>

        <!-- 已选商品列表 -->
        <!-- 商品列表 -->
      <view class="goods-list">
        <view class="goods-title">已选商品</view>
        <navigator 
        class="goods-item"
        v-for="item in selectCartList"
        :key="item.goods_id"
        :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`"
        open-type="navigate"
         >
          <image
          class="goods-image"
            :src="item.goods_small_logo || defaultImage"
           mode="aspectFit"
          />

          <view class="goods-info">
            <view class="goods-name">{{item.goods_name}}</view>
            <view class="goods-price">{{item.goods_price}}</view>
            <view class="goods-count">x {{ item.goods_count }}</view>
          </view>
        </navigator>
      </view>
        
        
      <!-- 底部操作栏 -->
	<view class="bottom-bar">
		
		
		<!-- 合计 -->
		<view class="total">
			<text class="total-name">合计:</text>
			<text class="total-price">¥ {{selectCartListPrice}}</text>
		</view>

		<!-- 结算 -->
		<view class="account" @click="handlePay">去支付({{seleCartListCount}})</view>

	</view>

    </view>
</template>

<script>
import { mapGetters } from 'vuex'
import {userWxlogin} from '@/api/users'
import { checkOrder, orderCreate, ordersPayInfo } from '../../api/order'
export default{
    data(){
        return {
            address:{}
        }
    },
    computed:{
        detailAddress(){
            //解构
            const {provinceName,cityName,countyName,detailInfo} =this.address
            return [provinceName,cityName,countyName,detailInfo].join(' ')
        },
        ...mapGetters([
            'selectCartList',
            'selectCartListPrice',
            'seleCartListCount'
        ])
    },
    methods:{
        getUserAddress(){
            //先判断是否有获取地址的授权

            uni.authorize({
                scope: 'scope.address',
                success: async (result) => {
                    console.log('授权开启')
                    const [error,res] = await uni.chooseAddress()
                    
                    
                    this.address = res
                    console.log('res',res)
                    console.log('error',error)
                },
                fail: (error) => {
                    //未开启获取收货地址的授权
                }
            })
           
        },
        async handlePay(){
            //1.判断用户是否有收获地址
            if(!this.address.userName){
                uni.showToast({
                    title: '请选择收货地址',
                    icon: 'none'
                })
                return
            }

            // 用户登录
           await this.$store.dispatch('userWxLogin')

            try {
        // 2.获取自己后台返回的支付相关的参数
        const orderCreateRes = await orderCreate({
            order_price:this.selectCartListPrice,
            consignee_addr:this.detailAddress,
            goods:this.selectCartList.map(item => {
                return{
                    goods_id:item.goods_id,
                    goods_price:item.goods_price,
                    goods_number:item.goods_count
                }
            })

        })
        console.log('orderCreateRes',orderCreateRes)
        const {order_number} = orderCreateRes.data.message

        const payInfoRes = await ordersPayInfo(order_number)
        console.log('payInfoRes',payInfoRes)
        const {pay} = payInfoRes.data.message
        console.log('pay',pay)

        // 3.调用微信接口实现微信支付
       const {errMsg} = await wx.requestPayment(pay)
       console.log('errMsg',errMsg)
        // 4.支付成功，更新订单支付状态
        const checkOrderRes = await checkOrder(order_number)
        console.log('checkOrderRes',checkOrderRes)
        // 5.跳转到订单页
        uni.navigateTo({ url: '/pages/order/orderlist' })
            } catch (error) {
                console.log('error',error)
                uni.showToast({
                    title: '支付失败',
                    icon: 'error',
                    mask: true
                })
            }
            
        }
        
       
       
    }
}
</script>

<style lang="scss">
page{
    background-color: #f3f3f3;
    
}
.address{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    margin: 20rpx;
    padding: 20rpx;
    border-radius: 10rpx;
    
    .address-info{
        width: 100%;
        .address-detail{
            font-size: 30rpx;
            font-weight: bold;
            margin-bottom: 20rpx;
        }
    }
    .address-btn{
        width: 224rpx;
        height: 90rpx;
        border-radius: 45rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #ea4450;
        color: #ea4450;

    }

}

.goods-list{
    background-color: #fff; 
    margin: 20rpx;
    padding: 20rpx;
    border-radius: 10rpx;
    .goods-title{
        font-weight: bold;
        height: 50rpx;
    }
    .goods-item{
         position: relative;
        .goods-count{
            position:absolute;
            right: 30rpx;
            bottom: 30rpx;
        }
        &:last-child{
            border-bottom: none;
        }
    }

    
    
}


.bottom-bar {
	height: 100rpx;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	/* #ifdef H5 */
	bottom: 100rpx;
	/* #endif */
	
	border-top: 1px solid #ddd;
	background-color: #fff;
	display: flex;
	align-items: center;
	padding: 0 20rpx;
 
  
	.total {
		flex: 1;
		display: flex;
		align-items: center;
		margin-left: 20rpx;
	
	 .total-name {
		font-size: 24rpx;
		margin-right: 10rpx;
	  }
  
     .total-price {
		color: #ea4350;
	  }
	}
  
   .account {
	background-color: #ea4350;
	color: #fff;
	font-size: 22rpx;
	width: 150rpx;
	height: 52rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 26rpx;
	}
  }
</style>
